<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<script>
    var currPage;//当前页
    var tPages;//总页数
    $(function () {
        var getEmpList = function (curr) {//curr表示当前页
            $.ajax({
                type: "POST",
                url: "/page",
                dataType: 'JSON',
                data: {
                    pageSize: 5,
                    pageNum: curr || 1,
                    ename: $("#ename").val()
                },
                success: function (result) {
                    $("#empTable").find("tr").remove();
                    $.each(result.empList, function (index, obj) {
                        // console.log(result)
                        var $newtr = "<tr>"
                            + "<td>" + obj.ename + "</td>"
                            + "<td>" + obj.esex + "</td>"
                            + "<td>" + obj.sal + "</td>" +
                            // ？用于 request.getParameter("eid")获得表单？后面的值
                            "<td ><a href=/delEmp?eid=" + obj.eid + ">删除</a>|<a href=empDetail?eid=" + obj.eid + ">修改</a> </td>" +
                            "</tr>";
                        //append表示将节点追加在指定元素的末尾
                        $("#empTable").append($newtr);
                    });
                    currPage = result.pageNum;
                    tPages = result.totalPages;
                },
            });
        }
        $(".pages").click(function () {
            //得到翻页的按钮id
            //  console.log($(this).attr("id"))
            var flag = $(this).attr("id");
            if (flag == "first") {
                getEmpList(1);
            } else if (flag == "prev") {
                currPage--;
                getEmpList(currPage)
            } else if (flag == "next") {
                currPage++;
                getEmpList(currPage);
            } else if (flag == "last") {
                getEmpList(tPages);
            }
        });
        getEmpList();
        //点击搜索 调用查询函数
        $("#search").click(function () {
            getEmpList();
        });

        function delConfirm() {
            return confirm("确认删除么？")
        }
    });


</script>
<body>

<input type="text" id="ename" placeholder="请输入搜索关键字" size="40">
<input type="button" id="search" value="搜索">
<a href="addEmp.html">新增员工</a>
<table id="empTable">
    <tr>
        <th>员工姓名</th>
        <th>员工性别</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
</table>
<!--javascript:void(0)
    点击超链接时不让页面刷新
-->
<a href="javascript:void(0)" id="first" class="pages">首页</a>
<a href="javascript:void(0)" id="prev" class="pages">上一页</a>
<a href="javascript:void(0)" id="next" class="pages">下一页</a>
<a href="javascript:void(0)" id="last" class="pages">尾页</a>
</body>